<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>9.选项卡Tab</title>
    <link rel="stylesheet" href="../layui-v2.7.6/layui/css/layui.css">
</head>
<body>
<script type="text/javascript" src="../layui-v2.7.6/layui/layui.js"></script>
<!--layui-tab 是默认风格-->
<!--layui-tab-brief 简约风格-->
<!--layui-tab-card 卡片风格-->
<!--lay-allowClose="true"  设置tab可以关闭-->
<div class="layui-tab layui-tab-brief" lay-filter="test1" lay-allowClose="true">
  <ul class="layui-tab-title">
<!--  lay-id="111"  用于id定位 跳转和删除的时候有用  -->
    <li class="layui-this" lay-id="111" >文章列表</li>
    <li lay-id="222">发送信息</li>
    <li lay-id="333">权限分配</li>
    <li lay-id="444">审核</li>
    <li lay-id="555">订单管理</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">1</div>
    <div class="layui-tab-item">2</div>
    <div class="layui-tab-item">3</div>
    <div class="layui-tab-item">4</div>
    <div class="layui-tab-item">5</div>
  </div>
</div>
</div>

<script>
  layui.use('element', function(){
    var element = layui.element;

    //获取hash来切换选项卡，假设当前地址的hash为lay-id对应的值
    var layid = location.hash.replace(/^#test1=/, '');
    element.tabChange('test1', layid); //假设当前地址为：http://a.com#test1=222，那么选项卡会自动切换到“发送消息”这一项

    // Tab 切换，以改变地址 hash 值
    element.on('tab(test1)', function(){
      location.hash = 'test1='+ this.getAttribute('lay-id');
    });
  });
</script>
</body>
</html>